<template>
	<view class="wu-toast" :style="{'align-items':position}" v-show="show">
		<view class="toast" :style="{'max-width':maxWidth}">
			<view>{{title}}</view>
			<image :src="icon" mode="widthFix" v-if="icon"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"wu-toast",
		props:{
			position:{
				Type:"String",
				default:"center"//flex-start center flex-end
			},
			 
			color:{
				Type:"String",
				default:"#fff"//字体颜色
			},
			maxWidth:{
				Type:"String",
				default:"480rpx"//字体颜色
			},
			fonsSize:{
				Type:"String",
				default:"26rpx"//字体大小
			},
			icon:{
				Type:"String",
				default:""//图标
			},
			 
		},
		data() {
			return {
				show:false,
				title:""
			};
		},
		methods:{
			showMyToast(object){
				this.show=true
				this.title=object.title
				let duration=object.duration ? object.duration : 3000 
				setTimeout(()=>{
					this.show=false
				}, duration)
			}
		}
	}
</script>

<style lang="scss" scoped>
.wu-toast{
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	// align-items:center;
	justify-content: center;
	pointer-events: none;
	// background-color: antiquewhite;	
	.toast{
		 
		min-width: 200rpx;
		padding: 20rpx;
		margin: 100rpx 0;
		border-radius: 20rpx;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;		
		view{
			text-align: center;
			color: #fff;		
			width: 100%;
			line-height: 48rpx;
			font-size: 32rpx;
			margin: 10rpx 0;
		}
		image{
			width: 120rpx;
			margin: 15rpx auto;
		}
		
	}
}
</style>